<template>
    <div class="password-input-wrapper">
      <el-input
        clearable
        type="password"
        v-model="password"
        @input="handleInput"
        placeholder="请输入下载密码"
        style="width: 300px"
      />
      <el-button type="success" @click="toggleVisibility" style="margin-left:30px">确定</el-button>
    </div>
  </template>
  
  <script>
  import { authValida } from "@/api/boc/common";
  export default {
    name: 'VerifyCodeInput',
    props: {
      modelValue: {
        type: String,
        default: '',
      },
    },
    data() {
      return {
        password: this.modelValue,
      };
    },
    watch: {
      modelValue(newVal) {
        this.password = newVal;
      },
      password(newVal) {
        this.$emit('update:modelValue', newVal);
      },
    },
    methods: {
      handleInput(event) {
        //this.password = event.target.value;
      },
      toggleVisibility() {    
        let jsonStr = `{"password": "${this.password}"}`;
        //alert(jsonStr);
        let data = JSON.parse(jsonStr);
        //alert(data);
        authValida(data).then(response => {
            this.$emit('validate-result', response.msg);  
  });
      },
    },
    mounted() {
      //this.$refs.passwordInput.type = this.visible ? 'text' : 'password';
    },
  };
  </script>
  
  <style scoped lang="scss">
  .password-input-wrapper {
    display: flex;
    align-items: center;
  }
  
  </style>